<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/icons-extra.css" />
	</head>

	<body>
		<div class="mui-content" id="form1">
			<!--<div class="mui-card">
				<div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(../images/cbd.jpg)"></div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>Posted on January 18, 2016</p>
						<p style="color: #333;">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<a class="mui-card-link">Like</a>
					<a class="mui-card-link">Read more</a>
				</div>
			</div>-->
			
			<div class="mui-card" v-for="content in item.contentlist">
				<div class="mui-card-header" v-html="content.title">
				</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner mui-navigate-right" style="background:no-repeat;" @tap="openDetail(content)">
						<img v-bind:src="content.img" style="width:100%;display:inline-block;height:auto;" />
						<p style="color: #333;" v-html="content.desc">这里显示文章摘要，让读者对文章内容有个粗略的概念...</p>
					</div>
				</div>
				<div class="mui-card-footer">
					<a class="mui-icon-extra mui-icon-extra-share" style="font-size:large;" @tap="shareSystem(content)">分享</a>
					<a class="mui-icon-extra mui-icon-extra-heart-filled" style="font-size:large;" @tap="addContent(content)">收藏</a>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript" src="../js/shiquan.js" ></script>
		<script type="text/javascript">
			mui.init();
			var vue = new Vue({
				el: '#form1',
				data:{
				item:{
						"maxResult": "10",
						"contentlist": [{
				          "link": "/dp/52305.html",
				          "img": "https://www.guidaye.com/images/img/175.jpg",
				          "desc": "段青岩乃钧州东十里人氏，生性聪慧，自幼苦读，却连着两回乡试落榜，这年又东拼西凑，好歹弄了些资川，恰逢母亲又病倒床榻，照顾母亲痊愈之后，急匆匆省城赴考。时值八月，天气不甚炎热，途经固县时，段青岩为节约行...",
				          "title": "易城隍"
				        }]
					}
				}
			});
			mui.plusReady(function(){
				//shiquan.initContent();
				plus.nativeUI.showWaiting("加载数据，请稍候...");
				/*type = dp-短篇,cp-长篇,xy-校园,yy-医院,jl-家里,mj-民间,ly-灵异,yc-原创 */
				var timestamp = Date.parse(new Date());
				var ajaxUrl = "https://route.showapi.com/955-1?showapi_appid=77261&showapi_sign=450ae1ece6114486936306d25890b033&page=1&type=dp&showapi_timestamp="+timestamp+"";
				console.log(ajaxUrl);
				mui.ajax(ajaxUrl,{
					data:{},
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:30000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(result){
						plus.nativeUI.closeWaiting();
						//服务器返回响应，根据响应结果，分析是否登录成功；
						console.log(JSON.stringify(result));
						vue.item = result.showapi_res_body.pagebean;
					},
					error:function(xhr,type,errorThrown){
						plus.nativeUI.closeWaiting();
						//异常处理；
						plus.nativeUI.alert("数据加载异常："+type);
					}
				});
			});
			
			function openDetail(item){
				console.log("link="+item.link);
				mui.openWindow("detail.html","detail",{
					extras:{link:item.link}
				});
			}
			
			function addContent(item){
				console.log("link="+item.link);
				var list = shiquan.addContent(item);
				plus.nativeUI.toast("保存成功！");
			}
			
			/**
			 * 调用系统分享
			 */
			function shareSystem(content){
				console.log('调用系统分享');
				var msg={content:"分享内容"};
				if(content.img){
					msg.pictures=["_www/images/logo.png"];
				}
				if('iOS' == plus.os.name){//iOS平台添加链接地址
					msg.href='http://www.dcloud.io/';
				}
				console.log(JSON.stringify(msg));
				if(plus.share.sendWithSystem){
					plus.share.sendWithSystem(msg, function(){
						plus.nativeUI.toast("分享成功！");
					}, function(e){
						console.log('Failed: '+JSON.stringify(e));
						plus.nativeUI.toast("分享失败："+JSON.stringify(e));
					});
				}else{
					shareSystemNativeJS();
				};
			}
			function shareSystemNativeJS() {
				if(plus.os.name !=='Android'){
					plus.nativeUI.alert('此平台暂不支持系统分享功能!');
					return;
				}
				var intent=new Intent(Intent.ACTION_SEND);
				if(pic&&pic.realUrl){
					var p = '';
					p = pic.realUrl;
					if(p.substr(0,7)==='file://'){
						p=p.substr(7);
					}else if(p.sub(0)!=='/'){
						p=plus.io.convertLocalFileSystemURL(p);
					}
				}
				var f = new File(p);
				var uri = Uri.fromFile(f);
				if(f.exists()&&f.isFile()){
					console.log('image/*');
					intent.setType('image/*');
					intent.putExtra(Intent.EXTRA_STREAM,uri);
				}else{
					console.log('text/plain');
					intent.setType('text/plain');
				}
				intent.putExtra(Intent.EXTRA_SUBJECT,'HelloH5');
				intent.putExtra(Intent.EXTRA_TEXT,sharecontent.value);
				intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
				main.startActivity(Intent.createChooser(intent,'系统分享HelloH5'));
			}
		</script>
	</body>

</html>